﻿<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ page contentType="text/html; charset=utf-8" %>
<%@ page language="java" %>
<%@ page import="com.mysql.jdbc.Driver" %>
<%@ page import="java.sql.*" %>
<%
request.setCharacterEncoding("UTF-8");
%>

<!DOCTYPE html>
<html  lang="en">
<head>

<meta charset="utf-8"/>
<link rel="shortcut icon" href="images/apple.ico" type="image/x-icon"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Rita 的小窝</title>
<!--Main Stylesheet-->
<link rel="stylesheet" type="text/css" href="css/homepage.css"/>
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"/>  
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="js/xmlhttp.js"></script>


</head>


<body data-spy="scroll" data-target="#myScrollspy">

<!--header-->

<nav class="navbar navbar-default" style="margin:0;padding:0;position:fixed;width:100%;z-index:99">

  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
	   <button type="button" class="navbar-toggle" id="nav-area" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
         <span class="sr-only">切换导航</span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
      </button>
     <span> <a class="navbar-brand" href="#" style="padding:0;border:0"><img id="club" src="images/logo.png" title="返回首页"/></a></span>
	 <span>&nbsp;&nbsp;&nbsp;<img id="ctr_bnt" src="images/qd3ODGuq.gif" style="position:absolute;bottom:5px;" onclick="change()"/></span>
    </div>


    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    
      <ul class="nav navbar-nav navbar-right"id="navList">
        <li id="mylog"><a href="#" data-toggle="modal" data-target="#myModal-login"><span class="glyphicon glyphicon-send"><span>&nbsp;登录</span></a></li>
		<li><a href="user/register.jsp"><span class="glyphicon glyphicon-user"><span>&nbsp;注册</a></li>     
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="glyphicon glyphicon-list-alt"></span>&nbsp;关于 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#" data-toggle="modal" data-target="#about-myWeb">关于本站</a></li>
            <li><a href="#" data-toggle="modal" data-target="#about-me">关于站长</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#"data-toggle="modal" data-target="#rule">管理规范<span class="glyphicon glyphicon-question-sign" style="float:right;"></span></a></li>
          </ul>
        </li>
		
      </ul>
	  
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

<!--登录模态框-->
<div class="modal fade" id="myModal-login"tabindex="100" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content" style="border-radius:0;width:50%;left:30%;top:100px;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4  class="modal-title"id="myModalLabel"style="font-family:'Microsoft YaHei' bold;">登录</h4>

</div>
<div class="modal-body">
 <form class="form-horizontal"role="form"action="user/userLogin.jsp"method="post">
    
     
    <div class="control-group">

          <!-- Text input-->
             <div class="input-group" style="margin:20px;">
         <span class="input-group-addon"  style="border-radius:0;">昵称</span>
         <input type="text" class="form-control" name="uname" id="uname" style="border-radius:0;" placeholder="请输入您的昵称" max-length=20 required>
      </div>
	  
       <div class="input-group" style="margin:20px;">
         <span class="input-group-addon" style="border-radius:0;">密码</span>
         <input type="password" class="form-control"  name="upassword" id="upassword" placeholder="请输入您的密码" max-length=20 style="border-radius:0;"required>
      </div>
        </div>
		
		<div class="checkbox"style="margin:20px;">
      <label>
      <input  id="remember" name="remember" type="checkbox">记住密码
      </label><span style="float:right;"> <a href="forget.jsp" target="blank">忘记密码</a></span>
   </div>
          
    <div class="control-group"style="margin-left:20px;margin-right:20px;">
          <!-- Button -->
          <div class="controls">
            <button class="btn btn-primary" id="ulogin" style="border-radius:0;width:100%;">登录</button>
          </div>
		  
        </div>
	<div style="margin-left:20px;"><a href="user/register.html" target="blank">立即注册</a></div>	
  </form>
 
</div>
</div>
</div>
</div>

<script>
$(function()
{
	var flag="<%=session.getAttribute("flag")%>";
	
		if(flag==1)
		{
			var userNam="<%=session.getAttribute("uname")%>";
			$("#navList").prepend("<li style='color:rgb(3, 245, 242);padding-top:15px;font-size:12px;'>"+userNam+"用户，您好！</li><li><a href='user/user.jsp' target='_blank' style='display:in-line;'>个人主页</a></li>");
			$("#navList").append("<li><a><span class='glyphicon glyphicon-log-out'></span></a></li>");
			$("#mylog").hide();
			
		}
	    if(flag==2)
		{
		$("#myModalLabel").append("<span style='color:red;font-size:12px;padding-left:30px;'>登录失败！请重新登录</span>");
		//		window.location.href=window.location.href;
		}
		
		$("#navList li:last").click(function(){
	
	XMLHttp.sendRequest('GET','user/logout.jsp','',fresh);
		function fresh(){
			window.location.href=window.location.href;
			}	
	});

		XMLHttp.sendRequest("GET", "user/msg_list.jsp", "",call1);
	function call1(obj){
		$('#msgdata').html(obj.responseText);
	}
	
	XMLHttp.sendRequest("GET","my/show_mw.jsp","",call2);
	function call2(obj){
		$('#mywork-area').html(obj.responseText);
	}
	
	$("#confirmpub").click(function(){
		
		if(flag==1){
			
			if($('#message').val()==""||$('#message').val()=="评论或留言。。。。"){
				alert("请输入留言！");
			}else{
					$.ajax({
			 type:"POST",
			 url:"user/leaveMsg.jsp",
			 data:$('#pub').serialize(),
			 success:function(){
				 window.location.href=window.location.href;
			 }
		 });
			}
		
		}else{
			alert("请登录！");
		}
	});
	
	
$('#message').focus(
function(){
var m_txt=$(this).val();
if(m_txt=="评论或留言。。。。"){
	$(this).val("");
}

$(this).css({"border":"white 1px solid","box-shadow":"0 0 2px 2px #fff","-moz-box-shadow":"0 0 2px 2px #fff","-webkit-box-shadow":"0 0 2px 2px #fff"});
}
);


$('#message').blur(
function(){
var m_txt=$(this).val();
if(m_txt==""){
	$(this).val("评论或留言。。。。");
}

$(this).css({"box-shadow":"0 0 0 0 #fff","-moz-box-shadow":"0 0 0 0 #fff","-webkit-box-shadow":"0 0 0 0 #fff"});
}
);
	});
	
	

	function setPicUrl(e){
		    e=e||window.event;
	e.target=e.target||e.srcElement;
	var p_id=$(e.target).attr('title');
//	alert(p_url);
	//var newwindow=window.open('about:blank'); 
	$.ajax({
		type:"POST",
		data:"p_id="+p_id,
		url:"my/lookForUrl.jsp",
		success:function(data){
		//	alert(data);
			$(e.target).parent().attr("href",data);
			$(e.target).parent().click();
		}
	});
	//	p=p.replace("ID：","");
	//alert(p);
//$(e.target).parent().attr("href","my/myWork.jsp?ID="+p);
//$(e.target).parent().click();
		
	}
	
</script>

<!--٘关于本站(modal)-->
<div class="modal fade" id="about-myWeb" tabindex="101" role="dialog" aria-labelledby="myModalLabel2" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content"  style="border-radius:0;left:20%;top:50px;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title"id="myModalLabel2" style="font-family:'Microsoft YaHei' bold;">关于本站</h4>
</div>
<div class="modal-body">
<p style="font-family:'Microsoft YaHei';line-height:30px;color:red;">本站用于站长的开发和学习，存在很多不足之处，希望大家能给予指导和纠正。</p>
<p style="font-family:'Microsoft YaHei';line-height:30px;margin:20px;">本站主要面向的是手工爱好者，站长是一名手工爱好者，希望通过本站与大家分享交流做手工的心得与经验。
<br/>本站主要分为三个模块：手工分享、我的手工世界、经验交流区。<br/>手工分享模块主要是分享一些站长平常收集的一些有关手工制作的资料。

<br/>我的手工世界是站长平常做的一些手工作品，有一些站长的经验分享，以及一些关于手工制作材料的介绍。

<br/>经验交流区将分享一些网友关于手工制作方面的经验，可以留言给站长，与站长互动。

<br/>希望网友能自觉遵守网络秩序，真心的与他人互动，并通过本站获得分享的乐趣，并找到志同道合的伙伴。</p>

</div>
</div>
</div>
</div>

<!--关于站长（modal）-->
<div class="modal fade" id="about-me"tabindex="102" role="dialog" aria-labelledby="myModalLabal3" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content"  style="border-radius:0;width:70%;left:20%;top:100px;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title"id="myModalLabel3" style="font-family:'Microsoft YaHei' bold;">关于站长</h4>
</div>
<div class="modal-body"><p style="font-family:'Microsoft YaHei';line-height:30px;">哈哈~~我就是一个爱做手工的2B青年，认识的有事私聊，不认识的就算了~~~~~~~</p>

<br/><p>^_^</p>
</div>

</div>
</div>
</div>

<!--管理规范（modal）-->
<div class="modal fade" id="rule" tabindex="103" role="dialog" aria-labelledby="myModalLabal4" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content"  style="border-radius:0;width:70%;left:20%;top:100px;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title"id="myModalLabel4" style="font-family:'Microsoft YaHei' bold;">管理规范</h4>
</div>
<div class="modal-body">
<div class="scroll-box">
<p>一.严禁发表、复制和传播下列信息：</p>
<p>1.	违反国家法律、法规的信息；</p>
<p>2.	捏造或者歪曲事实，散布谣言，扰乱社会秩序、影响社会安定和改革开放的信息；</p>
<p>3.	宣扬邪教和封建迷信、淫秽、色情、暴力、凶杀、恐怖、教唆犯罪的信息；</p>
<p>4.	公然侮辱他人、捏造事实诽谤他人的信息，带有政治色彩的侮辱性信息；</p>
<p>5.	用语不文明的信息；</p>
<p>6.	在文章中附带指向含有非法信息站点的链接。</p>
<p>如有存在以上行为者，信息将被删除，账户将被注销。</p>
<p>二.本站仅作学习之用，有很多转自其它网站的资料，将注明出处。从本站转帖，也请注明出处。</p>
</div>

</div>

</div>
</div>
</div>
</div>
<div>



<!--left-bar-->
<div  class="col-md-3" id="myScrollspy">
<div class="panel panel-default" style="border:0;margin:0;padding:0">
<div class="panel-body"id="my-pic">
<div class="col-md-12"><a href="admin/login.html"target="blank;"><img id="myPage" src="images/20110618130309-497673611.jpg" title="ٜ登录到后台"/></a></div>
</div>
</div>

<ul class="nav nav-tabs nav-stacked" id="myNav">
                <li class="active list"><a href="#section-1">&nbsp;手工分享</a></li>
                <li class="list"><a href="#section-2">&nbsp;我的手工世界</a></li>
              <li class="list"><a href="#section-3">&nbsp;经验交流区</a></li>
            </ul>
			
	<div style="margin-left:20px;margin-right:20px;margin-top:10px;color:white;">

与我联系：<i>RitaLi94@163.com</i>
</div>	
<div style="margin-left:20px;margin-right:20px;margin-top:5px;color:white;">
友情链接：<i><a class="link-a" href="http://www.duitang.com/"target="blank">堆糖网</a>&nbsp;&nbsp;<a class="link-a"href="http://www.rouding.com/"target="blank">肉丁网</a></i>
</div>	
</div>
</div>


<!--right-->
<div  class="col-md-9 col-md-offset-3" style="position:relative;top:50px;margin-right:0;padding-right:0;">
<!--手工分享-->
<div class="panel panel-default block">
  
   <div class="panel-body">
   <h3 id="section-1" class="box-title">&nbsp;&nbsp;手工分享</h3>
   <hr/>
   <div  style="border:white 1px solid;">
   <div class="panelList"style="width:5%;float:left;"><!--切换卡-->
   <ul id="tab1" class="nav">
   <li class="active"><a class="link-a" href="#buyi" data-toggle="tab">布艺</a></li>
   <li><a class="link-a" href="#zhezhi" data-toggle="tab">折纸</a></li>
   <li><a class="link-a" href="#bianzhi" data-toggle="tab">编织</a></li>
   <li><a class="link-a" href="#other" data-toggle="tab">其他</a></li>
   </ul>
   </div>
   
   <div id="tab1Content" class="tab-content">
   <!--布艺模块-->
   <div class="tab-pane fade in active" id="buyi">
   <a class="btnLeft"id="btnLeft1"><img src="images/left_ar.png"/></a>
   <a class="btnRight"id="btnRight1"><img src="images/right_ar.png"/></a>
    <div class="box">
<a target="_blank"><img style="opacity:1;filter:alpha(opacity=100);"title="7" src="pictures/cloth/xiangkuang.jpg"onclick="setPicUrl(event)"/> </a>
<a target="_blank"><img title="2" src="pictures/cloth/buzhibushougong.jpg"onclick="setPicUrl(event)"/> </a>
<a target="_blank"><img title="3" src="pictures/cloth/maoxiaoxuezi.jpg"onclick="setPicUrl(event)"/></a>
<a target="_blank"><img title="4" src="pictures/cloth/shounadai.jpg"onclick="setPicUrl(event)"/></a>
<a target="_blank"><img title="5" src="pictures/cloth/shuqian.jpg"onclick="setPicUrl(event)"/></a>
<a target="_blank"><img title="1" src="pictures/cloth/buyimeigui.jpg"onclick="setPicUrl(event)"/></a>
<a target="_blank"><img title="6" src="pictures/cloth/tuzi.jpg"onclick="setPicUrl(event)"/></a>
   </div>
   <div class="page">
   <a class="active1" href="#">1</a>
   <a href="#">2</a>
   <a href="#">3</a>
   <a href="#">4</a>
   <a href="#">5</a>
   <a href="#">6</a>
   <a href="#">7</a>
   </div>
   
   </div>
   
   <!--折纸模块-->
   <div class="tab-pane fade" id="zhezhi">
      <a class="btnLeft"id="btnLeft2"><img src="images/left_ar.png"/></a>
   <a class="btnRight"id="btnRight2"><img src="images/right_ar.png"/></a>
    <div class="box">
<a target="_blank"><img title="14" style="opacity:1;filter:alpha(opacity=100);" src="pictures/origami/lianhua.jpg"onclick="setPicUrl(event)"/> </a>
<a target="_blank"><img title="15" src="pictures/origami/qianzhihe.jpg"onclick="setPicUrl(event)"/> </a>
<a target="_blank"><img title="16" src="pictures/origami/xinxing.jpg"onclick="setPicUrl(event)"/></a>
<a target="_blank"><img title="17" src="pictures/origami/zhibitong.jpg"onclick="setPicUrl(event)"/></a>
<a target="_blank"><img title="18" src="pictures/origami/zhimeigui.jpg"onclick="setPicUrl(event)"/></a>
<a target="_blank"><img title="19" src="pictures/origami/zhiqiu.jpg"onclick="setPicUrl(event)"/></a>
   </div>
   <div class="page">
   <a class="active2" href="#">1</a>
   <a href="#">2</a>
   <a href="#">3</a>
   <a href="#">4</a>
   <a href="#">5</a>
   <a href="#">6</a>
   </div>
   
   </div>
   
  <!--编织模块-->
  <div class="tab-pane fade" id="bianzhi">
     <a class="btnLeft"id="btnLeft3"><img src="images/left_ar.png"/></a>
   <a class="btnRight"id="btnRight3"><img src="images/right_ar.png"/></a>
    <div class="box">
<a target="_blank"><img title="8" style="opacity:1;filter:alpha(opacity=100);" src="pictures/knit/bianhua.jpg"onclick="setPicUrl(event)"/> </a>
<a target="_blank"><img title="9" src="pictures/knit/shoulian1.jpg"onclick="setPicUrl(event)"/> </a>
<a target="_blank"><img title="10" src="pictures/knit/shoulian2.jpg"onclick="setPicUrl(event)"/></a>
<a target="_blank"><img title="11" src="pictures/knit/shoulian3.jpg"onclick="setPicUrl(event)"/></a>
<a target="_blank"><img title="12" src="pictures/knit/sidaidenglong.jpg"onclick="setPicUrl(event)"/></a>
<a target="_blank"><img title="13" src="pictures/knit/yuguweijin.jpg"onclick="setPicUrl(event)"/></a>
   </div>
   <div class="page">
   <a class="active3" href="#">1</a>
   <a href="#">2</a>
   <a href="#">3</a>
   <a href="#">4</a>
   <a href="#">5</a>
   <a href="#">6</a>
   </div>
  
  </div>
   <!--其他模块-->
   <div class="tab-pane fade" id="other">
      <a class="btnLeft"id="btnLeft4"><img src="images/left_ar.png"/></a>
   <a class="btnRight"id="btnRight4"><img src="images/right_ar.png"/></a>
    <div class="box">
<a target="_blank"><img title="20" style="opacity:1;filter:alpha(opacity=100);" src="pictures/other/bingqilin.jpg"onclick="setPicUrl(event)"/> </a>
<a target="_blank"><img title="21" src="pictures/other/huapen.jpg"onclick="setPicUrl(event)"/> </a>
<a target="_blank"><img title="22" src="pictures/other/huapen2.jpg"onclick="setPicUrl(event)"/></a>
<a target="_blank"><img title="23" src="pictures/other/luntaizuodian.jpg"onclick="setPicUrl(event)"/></a>
<a target="_blank"><img title="24" src="pictures/other/pingsai.jpg"onclick="setPicUrl(event)"/></a>
<a target="_blank"><img title="25" src="pictures/other/pingzishounahe.jpg"onclick="setPicUrl(event)"/></a>
<a target="_blank"><img title="26" src="pictures/other/xiaotaideng.jpg"onclick="setPicUrl(event)"/></a>
<a target="_blank"><img title="27" src="pictures/other/yishuxiaodeng.jpg"onclick="setPicUrl(event)"/></a>
   </div>
   <div class="page">
   <a class="active4" href="#">1</a>
   <a href="#">2</a>
   <a href="#">3</a>
   <a href="#">4</a>
   <a href="#">5</a>
   <a href="#">6</a>
   <a href="#">7</a>
    <a href="#">8</a>
   </div>
   
   </div>
   </div>
   
   </div>
</div>
</div>


<div class="panel panel-default block">
   <div class="panel-body">
 
   <h3 id="section-2"class="box-title">&nbsp;&nbsp;我的手工世界</h3>
   <hr/>
   <div id="mywork-area"></div>
</div></div>

 
 <div class="panel panel-default block"  style="height:800px;">
   <div class="panel-body">
 
            <h3 id="section-3"class="box-title">&nbsp;&nbsp;经验交流区</h3>
           <hr/>
		   <div>
		   
		   <div class="col-md-4 col-md-offset-8"style="position:absolute;">
		   <form id="pub" name="pub">
		   <textarea id="message" name="message"rows="8"cols="30"overflow="scroll">评论或留言。。。。</textarea>
		   <div class="col-md-12">
		   <button type="button" id="confirmpub" name="confirmpub"class="btn btn-default" value="发布">发布</button>
		 &nbsp;&nbsp;请<a href="#" class="link-a" data-toggle="modal"data-target="#myModal-login">登录</a>后发布留言或评论
		  </div>
		   
		   </form>
		   
		   </div>
		   <div class="well col-md-8" id="msgdata"></div>
		   </div>
           </div>
  </div>
  <div id="footer">
    <div class="copyright">Copyright &copy; Rita.&nbsp; All Rights Reserved.</div>
</div>
  </div>

  
  <script type="text/javascript" src="js/myPage.js"></script>
<!--返回顶部-->
<a id="up" href="#"><span class="glyphicon glyphicon-circle-arrow-up"style="font-size:50px;"></span></a>


</body>
</html>